<template>
  <view class="uv-page">
    <view v-for="(item, index) in demoBlocks" :key="index">
      <view class="uv-demo-block list" v-if="item.isVisible">
        <text class="uv-demo-block__title">{{ item.date }}</text>
        <view class="uv-demo-block__content">
          <view class="album">
            <view class="album__avatar">
              <image
                src="/static/uvui/common/logo.png"
                mode=""
                style="width: 32px; height: 32px"
              ></image>
            </view>
            <view class="album__content">
              <uv-text
                :text="item.date"
                type="primary"
                bold
                size="17"
              ></uv-text>
              <uv-text margin="0 0 8px 0" :text="item.content"></uv-text>
              <uv-album
                :multipleSize="62"
                :urls="item.urls"
                rowCount="3"
                maxCount="10"
                multipleMode="scaleToFill"
              ></uv-album>
            </view>
          </view>
        </view>
      </view>
      <!-- 占位元素，用于监听进入视口事件 -->
      <view v-else class="placeholder" ref="placeholders"></view>
    </view>

    <view class="wrap" ref="backTop">
      <uv-back-top :scroll-top="scrollTop" :duration="500"></uv-back-top>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      albumWidth: 0,

      urls3: [
        "https://lc.web.jinrijiesuan.cn/uploads/20250617/a3f5e145e7345b0f4e389be40b823016.png",
        "https://lc.web.jinrijiesuan.cn/uploads/20250628/24527c84a915a7e9185fa9d2d4e7b020.png",
        "https://lc.web.jinrijiesuan.cn/uploads/20250617/a3f5e145e7345b0f4e389be40b823016.png",
        "https://lc.web.jinrijiesuan.cn/uploads/20250628/24527c84a915a7e9185fa9d2d4e7b020.png",
        "https://lc.web.jinrijiesuan.cn/uploads/20250617/a3f5e145e7345b0f4e389be40b823016.png",
        "https://lc.web.jinrijiesuan.cn/uploads/20250628/24527c84a915a7e9185fa9d2d4e7b020.png",
        "https://lc.web.jinrijiesuan.cn/uploads/20250628/24527c84a915a7e9185fa9d2d4e7b020.png",
        "https://lc.web.jinrijiesuan.cn/uploads/20250617/a3f5e145e7345b0f4e389be40b823016.png",
        "https://lc.web.jinrijiesuan.cn/uploads/20250617/a3f5e145e7345b0f4e389be40b823016.png",
      ],
      // 定义要渲染的数据
      demoBlocks: [
        {
          date: "2025年6月28日",
          content:
            "周六，天气晴朗。今日运动状态极佳！早上起床后，我换上运动装备，前往附近的公园进行晨跑。沿着公园的跑道，我一共跑了 5 公里，用时 30 分钟，平均配速 6 分钟/公里。跑步过程中，微风拂面，周围绿树成荫，鸟儿欢唱，让人心旷神怡。跑完后，我还做了 15 分钟的拉伸运动，放松肌肉。这次运动不仅锻炼了身体，还让我以饱满的精神状态开启新的一天。",
          urls: this.urls3,
          isVisible: false,
        },
        {
          date: "2025年6月27日",
          content:
            "周六，天气晴朗。今日运动状态极佳！早上起床后，我换上运动装备，前往附近的公园进行晨跑。沿着公园的跑道，我一共跑了 5 公里，用时 30 分钟，平均配速 6 分钟/公里。跑步过程中，微风拂面，周围绿树成荫，鸟儿欢唱，让人心旷神怡。跑完后，我还做了 15 分钟的拉伸运动，放松肌肉。这次运动不仅锻炼了身体，还让我以饱满的精神状态开启新的一天。",
          urls: this.urls3,
          isVisible: false,
        },
      ],
    };
  },

  onReady() {
    this.setupIntersectionObserver();
  },
  methods: {
    setupIntersectionObserver() {
      const observers = [];
      this.$nextTick(() => {
        this.$refs.placeholders.forEach((placeholder, index) => {
          const observer = uni.createIntersectionObserver(this, {
            thresholds: [0],
          });
          observer.relativeToViewport().observe(placeholder, (res) => {
            if (res.intersectionRatio > 0) {
              this.demoBlocks[index].isVisible = true;
              observer.disconnect();
            }
          });
          observers.push(observer);
        });
      });
    },
  },

  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
    // #ifdef APP-NVUE
    this.scrollTop = e.detail.scrollTop;
    // #endif
  },
};
</script>

<style lang="scss">
$uv-bg-color: #f3f4f6 !default;
@import "@/common/demo.scss";
.album {
  @include flex;
  align-items: flex-start;
  &__avatar {
    background-color: $uv-bg-color;
    padding: 5px;
    border-radius: 3px;
  }
  &__content {
    margin-left: 10px;
    flex: 1;
  }
}
.wrap {
  height: 2000px;
}
.placeholder {
  height: 100px; /* 占位元素高度，可根据实际情况调整 */
}
</style>
